<template>
  <div>
    <van-nav-bar title="地图找房" left-arrow @click-left="$router.back()" />
    <baidu-map class="house-map" :center="city" :zoom="zoom" @ready="initMap">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-overlay
        v-for="item in list"
        :key="item.value"
        pane="labelPane"
        class="sample"
        @draw="draw($event,item.coord)"
      >
        <p>{{item.label}}{{item.count}}套房子</p>
      </bm-overlay>
    </baidu-map>
  </div>
</template>

<script>
import request from '@/utils/request'
import { mapState } from 'vuex'

export default {
  name: 'HaokezfCityMap',

  data () {
    return {
      zoom: 10,
      list: []
    }
  },
  computed: {
    ...mapState(['city', 'cityId'])
  },

  mounted () {
    this.getCityPoint()
  },
  created () {},

  methods: {
    draw ({ el, BMap, map }, { longitude, latitude }) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(longitude, latitude))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    initMap ({ BMap, map }) {
      const myGeo = new BMap.Geocoder()
      myGeo.getPoint(
        this.city,
        function (point) {
          if (point) {
            map.centerAndZoom(point, 10)
          }
        },
        this.city
      )
    },
    async getCityPoint () {
      const id = this.cityId
      const res = await request({
        url: '/area/map',
        params: {
          id
        }
      })
      this.list = res.body
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.house-map {
  width: 100%;
  height: 622px;
}
.sample {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  background: rgba(12, 181, 106, 0.9);
  border: 2px solid hsla(0, 0%, 100%, 0.8);
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
}
</style>
